<template>
  <div class="app-container">
    <list-page-container>

      <template slot="handel">
        <el-button type="primary" icon="el-icon-plus"
                   size="mini" @click="handleAdd">新增地域
        </el-button>
      </template>

      <template slot="table">
        <el-table
            :data="dataList"
            style="width: 100%;margin-bottom: 20px;"
            height="100%"
            row-key="id"
            default-expand-all
            :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
          <el-table-column label="地域名称" align="left" prop="orgName"/>
          <el-table-column label="地域代码" align="left" prop="orgCode"/>
          <el-table-column label="地域类型" align="left" prop="orgTypeName"/>
          <el-table-column width="200" label="操作" align="center" class-name="small-padding fixed-width">
            <template slot-scope="scope">
              <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-plus"
                  @click="handleAdd(scope.row)"
              >新增
              </el-button>
              <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-edit"
                  v-if="!scope.row.top"
                  @click="handleUpdate(scope.row)"
              >修改
              </el-button>

              <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-delete"
                  v-if="!scope.row.top"
                  @click="handleDelete(scope.row)"
              >删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </template>


    </list-page-container>

    <el-drawer
        class="diy-draw"
        :title="title"
        :wrapperClosable="false"
        :visible.sync="open">
      <drawer-content>
        <template slot="body">
          <el-scrollbar>
            <el-form v-if="open" :rules="rules" :model="form" ref="form" size="small"
                     label-width="80px">
              <el-form-item label="上级地域" prop="parentCode">
                <treeselect :disabled="hanType == OPERATE_TYPE.UPDATE" v-model="form.parentCode" :options="deptOptions"
                            :normalizer="normalizer"
                            placeholder="选择上级地域"/>
              </el-form-item>
              <el-form-item class="column-item" label="地域名称" prop="orgName">
                <el-input
                    v-model="form.orgName"
                    placeholder="请输入地域名称"
                    type="textarea"
                    clearable
                >
                </el-input>
              </el-form-item>
              <el-form-item class="column-item" label="地域代码" prop="orgCode">
                <el-input
                    v-model="form.orgCode"
                    placeholder="请输入地域代码"
                    type="textarea"
                    clearable
                    :disabled="hanType == OPERATE_TYPE.UPDATE"
                >
                </el-input>
              </el-form-item>
              <el-form-item class="column-item" label="地域类型" prop="orgType">
                <el-select v-model="form.orgType" :disabled="hanType == OPERATE_TYPE.UPDATE">
                  <el-option
                      v-for="dict in dict.type.enum_org_type"
                      :key="dict.value"
                      :label="dict.label"
                      :value="dict.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-form>
          </el-scrollbar>
        </template>
        <template slot="footer">
          <el-button type="primary" icon="el-icon-plus" size="mini" @click="submitData">确定</el-button>
        </template>
      </drawer-content>
    </el-drawer>

  </div>

</template>

<script>
import {listPageMixins} from "@/mixins/listPageMixins";
import ShowFileList from "@/components/ShowFileList/index.vue";
import {HIDDEN_DANGER_WIDTH, OPERATE_TYPE} from "@/constantData";
import {addDept, delDept, getDept, listDept, listDeptExcludeChild, updateDept} from "@/api/system/dept";
import Treeselect from "@riophae/vue-treeselect";

export default {
  name: 'dept',
  dicts: ['enum_org_type'],
  mixins: [listPageMixins],
  components: {
    ShowFileList,
    Treeselect
  },
  data() {
    return {
      // 是否展开，默认全部展开
      isExpandAll: true,
      HIDDEN_DANGER_WIDTH,
      modelName: '地域',
      // 查询参数
      queryParams: {},
      otherQueryParam: {},
      getListFun: listDept,
      addFun: addDept,
      updateFun: updateDept,
      getInfoFun: getDept,
      deleteFun: delDept,
      deptOptions: [],
      OPERATE_TYPE,
      baseForm: {
        id: null,
        orgCode: null,
        orgName: null,
        orgType: null,
        orgTypeName: null,
        parentCode: null,
      },
      rules: {
        orgName: [
          {required: true, message: "地域名称不能为空", trigger: "blur"}
        ],
        orgCode: [
          {required: true, message: "地域代码不能为空", trigger: "blur"}
        ],
        parentCode: [
          {required: true, message: "上级地域不能为空", trigger: "change"}
        ],
        orgType: [
          {required: true, message: "地域类型不能为空", trigger: "change"}
        ],
      },
      hanType: '',
    }
  },
  methods: {
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      this.hanType = OPERATE_TYPE.UPDATE
      getDept({id: row.id}).then(response => {
        this.form = response.data;
        this.open = true;
        this.title = "修改地域";
      });
      let owner = this
      listDept().then(response => {
        owner.deptOptions = this.handleTree(response.data, "orgCode", 'parentCode');
      });
    },
    /** 转换地域数据结构 */
    normalizer(node) {
      if (node.children && !node.children.length) {
        delete node.children;
      }
      return {
        id: node.orgCode,
        label: node.orgName,
        children: node.children
      };
    },
    changeRowData(rows) {
      return this.handleTree(rows, "orgCode", 'parentCode');
    },
    /** 新增按钮操作 */
    handleAdd(row) {
      let {modelName} = this
      this.reset();
      this.hanType = OPERATE_TYPE.ADD
      if (row != undefined) {
        this.form.parentCode = row.orgCode;
      }
      let owner = this
      listDept().then(response => {
        owner.deptOptions = this.handleTree(response.data, "orgCode", 'parentCode');
        owner.open = true;
        owner.title = `添加${modelName}`;
      });
    },
  }
}
</script>

<style scoped>

</style>

